Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@front_end/src/app/`(main)/components/bulletin.tsx:
- Around line 47-53: Replace the clickable FontAwesomeIcon with a real button
element and only render it when the dismissal handler exists: conditionally
render the control when onHidden is defined, use a <button> (instead of
FontAwesomeIcon alone) that contains the FontAwesomeIcon component, add
accessible attributes like aria-label and type="button" and ensure keyboard
activation calls onHidden; also replace any hardcoded English aria-label/text
with the translation string (e.g., via your existing translation
function/useTranslation) so the dismiss control is localized. Reference:
FontAwesomeIcon and onHidden in bulletin.tsx.

In `@front_end/src/app/`(main)/components/bulletins_client.tsx:
- Around line 48-55: The query function for React Query (queryFn) currently
catches errors from ClientMiscApi.getBulletins, logs them via logError, and
returns [] which overwrites valid SSR/initialData; change the catch to log the
error with logError but then rethrow (or throw the caught error) instead of
returning an empty array so React Query can preserve the last successful data
(leave ClientMiscApi.getBulletins and queryFn as the referenced symbols to
locate the code).
- Around line 76-79: The code adds bulletinId to
syncedDismissedBulletinIdsRef.current before the network call and never removes
it on failure, so transient errors permanently mark a dismiss as synced; change
the logic in the dismiss flow that uses syncedDismissedBulletinIdsRef and
dismissBulletin so the id is only added after dismissBulletin resolves
successfully, or if you must optimistically add it then remove it inside the
catch handler (using syncedDismissedBulletinIdsRef.current.delete(bulletinId))
and rethrow/log via logError to allow retries; ensure all references to
syncedDismissedBulletinIdsRef, dismissBulletin, logError, and bulletinId are
updated accordingly.
- Around line 37-42: The component seeds dismissedBulletinIds and
syncedDismissedBulletinIdsRef only on initial mount so client state doesn't
update when new initialDismissedBulletinIds/initialSyncedDismissedBulletinIds
props arrive (causing dismissal leakage across sessions); add a useEffect in the
same component (bulletins_client.tsx) that watches initialDismissedBulletinIds
and initialSyncedDismissedBulletinIds and calls setDismissedBulletinIds(() =>
new Set(initialDismissedBulletinIds)) and sets
syncedDismissedBulletinIdsRef.current = new
Set(initialSyncedDismissedBulletinIds) to reset the state/ref whenever the prop
values change.

In `@front_end/src/app/`(main)/components/bulletins_shared.ts:
- Around line 13-19: The current parsing chain (value.split(...).map(id =>
Number.parseInt(id, 10)).filter(Number.isFinite)) accepts malformed entries like
"12abc", negatives and decimals; replace it with strict positive-integer
validation: when mapping each raw id from value.split(...) validate the raw
string with a digits-only check (e.g. /^\d+$/) or use Number and
Number.isInteger plus > 0 before including it, and then dedupe as before; update
both occurrences (the shown parseInt usage and the same block at lines 23-27) to
only accept strictly positive integers and reject all other inputs.

In `@front_end/src/app/`(main)/components/content_translated_banner/index.tsx:
- Around line 56-58: The span contains a hardcoded English label "translated
by"; replace it with the i18n helper by importing and using useTranslations()
and calling t(...) where this component (e.g., the ContentTranslatedBanner
component or its functional scope) renders that span; update the JSX to use
t("translated_by") (or the appropriate key you add to your translation files) so
the string is localized and ensure the translation key exists in the locale JSON
used by useTranslations().

In `@front_end/src/app/`(main)/notebooks/components/notebook_content_sections.tsx:
- Around line 84-87: The TOC active-section offset ignores dynamic chrome height
on desktop: update the offset calculation used when computing activeId so it
includes topChromeHeight for both branches (i.e., change the isLargeScreen
branch from using DESKTOP_SCROLL_OFFSET alone to DESKTOP_SCROLL_OFFSET +
topChromeHeight or apply a bulletin delta before computing activeId). Locate the
variables and logic around offset, isLargeScreen, DESKTOP_SCROLL_OFFSET,
topChromeHeight and activeId in notebook_content_sections.tsx and ensure the
desktop path uses the real chrome height when computing the scroll offset for
active section highlighting.

In
`@front_end/src/app/`(prediction-flow)/tournament/[slug]/prediction-flow/loading.tsx:
- Around line 29-41: The loading header shows exit controls that are
non-functional; update the two Button usages inside FlowHeaderActions (the text
button that renders t("exitPredictionFlow") and the icon-only Button with
FontAwesomeIcon/faRightFromBracket) to call the real exit handler (pass the
existing exit function or navigation callback as an onClick or provide an href)
and ensure the icon-only Button has an accessible label (e.g., aria-label or
aria-labelledby) so screen readers can announce the action; keep
styling/variants the same while wiring these Buttons to the actual exit
behavior.

In `@misc/models.py`:
- Around line 47-48: The Bulletin model's __str__ currently slices raw HTML from
self.text which can leak tags; update Bulletin.__str__ to first convert/sanitize
the stored HTML to plain text (e.g., use django.utils.html.strip_tags or an
equivalent HTML-to-text helper) then truncate that plaintext to 150 characters
and append "..." when longer; add the needed import (strip_tags) and ensure you
call the plain-text variable in the return value instead of self.text.

In `@misc/views.py`:
- Around line 143-145: The code directly calls Bulletin.objects.get(pk=pk)
inside BulletinViewedBy.objects.get_or_create which raises Bulletin.DoesNotExist
and causes a 500; first resolve the Bulletin using a 404-safe lookup (e.g.,
Django's get_object_or_404 or catch Bulletin.DoesNotExist and raise Http404)
into a local variable (e.g., bulletin) and then call
BulletinViewedBy.objects.get_or_create(bulletin=bulletin, user=user) so
stale/invalid ids return a 404 instead of a server error.

---

Nitpick comments:
In `@front_end/package.json`:
- Line 127: Update the `@types` package to match the sanitize-html library
version: change the dependency entry for "@types/sanitize-html" to a version
that aligns with "sanitize-html" (e.g., bump to 2.17.x) so type definitions
better match the runtime; update the package.json dependency for
"@types/sanitize-html" and run the lockfile update (npm/yarn/pnpm install) to
ensure the new types are installed and consistent with the "sanitize-html"
package.

In `@front_end/src/app/`(main)/components/top_chrome_client.tsx:
- Around line 42-47: Wrap the MutationObserver.observe call in a try/catch
similar to the ResizeObserver handling: when creating the observer (const
observer = new MutationObserver(updateTopChromeHeight)) surround
observer.observe(topChromeEl, { attributes: true, childList: true, subtree: true
}) with a try block and on catch log the error (or handle it) using the same
logger/cleanup pattern used for ResizeObserver to avoid uncaught exceptions if
topChromeEl is invalid or options are malformed.

In `@front_end/src/app/`(services-quiz)/components/services_quiz_flow_content.tsx:
- Around line 26-27: The code is using a type assertion on step when picking
ActiveStep (ActiveStep, STEP_COMPONENTS, ServicesQuizStepId,
useServicesQuizFlow) which bypasses type safety; instead, ensure step is
properly typed upstream by updating useServicesQuizFlow to return
ServicesQuizStepId, or validate/narrow step before indexing (e.g., check it's an
integer and within STEP_COMPONENTS bounds or use a runtime existence check) and
then select STEP_COMPONENTS[step] with a safe fallback, removing the unsafe "as"
assertion.

In `@front_end/src/hooks/use_top_chrome_height.ts`:
- Around line 35-40: Wrap the MutationObserver.observe call in a try/catch to
defensively handle rare failures: when creating/starting the observer (the
`observer.observe(document.documentElement, { attributes: true, attributeFilter:
["style"] })` invocation in use_top_chrome_height.ts), catch any thrown error,
log or handle it (e.g., console.warn or a provided logger) and avoid crashing
the hook; still attach the `window.addEventListener("resize",
updateTopChromeHeight)` fallback so resize updates continue, and ensure you call
`observer.disconnect()` in the hook cleanup only if observation succeeded.

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@front_end/src/app/`(main)/components/bulletin.tsx:
- Around line 17-31: The transformTags handler for "a" should always ensure rel
includes both "noopener" and "noreferrer" when attribs.target === "_blank":
update the logic in the transformTags.a function to read the existing
attribs.rel (if any), split it into tokens, add "noopener" and "noreferrer" to
the set, then rejoin and assign attribs.rel to the merged value before
returning; keep returning the original tagName and merged attribs otherwise. Use
the existing symbols transformTags and the a tag handler and operate on
attribs.target and attribs.rel to locate and fix the code.

---

Nitpick comments:
In `@front_end/src/app/`(main)/components/bulletin.tsx:
- Around line 59-65: The div rendering sanitizedText is using
suppressHydrationWarning unnecessarily; remove the suppressHydrationWarning prop
from the div in bulletin.tsx (the element that sets dangerouslySetInnerHTML with
__html: sanitizedText) unless you have a confirmed hydration mismatch. Instead,
ensure sanitizedText is computed deterministically from the incoming text prop
(no client-only sources like cookies/locale) and run the app to confirm there
are no hydration warnings; if you must keep it, add a short comment explaining
the concrete mismatch and why suppressHydrationWarning is required.